import Form from 'ant-design-vue/es/form';
import FormItem from 'ant-design-vue/es/form/formItem';
import { Space, Input, Radio } from 'ant-design-vue';
import { dialog } from '@gis/lib/components/antd-dialog';
// import SpinButton from '@gis/lib/components/Button/SpinButton.vue';
import InfoTitle from '@/components/info-title.vue';
import { getMessageConfiguration, sendReportMessage } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { h } from 'vue';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';

const typeEnum = { 初报: '16', 续报: '17' };

const View = {
  name: 'SendReport',
  props: {
    type: { type: String, default: '初报' /* 初报,续报 */ },
    warn_id: { type: String, default: '' },
  },
  data() {
    return {
      data: {},
      param_type: '1',
      formData: {},
      formItems: [],
      radioOptions: [
        { label: '否', value: '1' },
        { label: '是', value: '2' },
      ],
    };
  },
  computed: {
    msg() {
      const template =
        this.type === '初报' ? this.data.param1 : this.type === '续报' ? this.data['param' + this.param_type] : '';
      return Object.keys(this.formData).reduce((res, key) => {
        return res.replace(
          new RegExp('{' + key + '}'),
          '<span style="border-bottom: 1px solid #999999">' + (this.formData[key] || key) + '</span>'
        );
      }, template);
    },
  },
  methods: {
    async getMessageData(param_type = this.param_type) {
      const { area_code } = useUserInfoStore();
      const params = {
        area_code: area_code,
        warn_id: this.warn_id,
        type: typeEnum[this.type],
        param_type: param_type === '2' ? '有' : '无',
      };
      this.data = this.handleCommonResult(await getMessageConfiguration(params), { defaultValue: {} });
      const dataParams = Array.isArray(this.data.params) ? this.data.params : [];
      this.formItems = dataParams.filter((item) => item.input_type == 1).map((item) => ({ field: item.param_name }));
      this.formData = dataParams.reduce((res, item) => {
        return Object.assign(res, { [item.param_name]: item.content });
      }, {});
    },
    async sendMessage() {
      const params = {
        content: this.$refs.Msg.innerText,
        warn_id: this.warn_id,
        type: typeEnum[this.type],
      };
      return this.handleFormResult(await sendReportMessage(params), {
        onOk: () => this.closeDialog(),
      });
    },
    onRadioChange(e) {
      const type = e.target.value;
      this.getMessageData(type).then(() => {
        this.param_type = type;
      });
    },
    closeDialog() {
      this.$emit('closeDialog');
    },
  },
  created() {
    this.getMessageData().catch();
  },
  render() {
    return h('div', { style: { color: '#ffffff' } }, [
      h('div', { style: { padding: '24px 24px 0' } }, [
        h(SplitTitle, { text: '短信内容' }, '短信内容'),
        h('div', {
          ref: 'Msg',
          style: { marginBottom: '24px', color: '#ffffff' },
          domProps: { innerHTML: this.msg },
        }),
        h(InfoTitle, {}, '请填写以下内容'),
        h(
          Form,
          {
            ref: 'Form',
            attrs: { model: this.formData, layout: 'vertical' },
            style: { height: '380px', overflow: 'hidden auto', margin: '0 -24px', padding: '0 24px' },
          },
          [
            h(FormItem, { attrs: { label: '是否有人员伤亡', labelCol: { span: 4 }, wrapperCol: { span: 20 } } }, [
              h(Radio.Group, { attrs: { value: this.param_type }, on: { change: this.onRadioChange } }, [
                this.radioOptions.map((item) =>
                  h(Radio, { attrs: { value: item.value } }, [h('span', { style: { color: '#ffffff' } }, item.label)])
                ),
              ]),
            ]),
            this.formItems.map((item) => {
              return h(
                FormItem,
                { attrs: { prop: item.field, label: item.field, labelCol: { span: 4 }, wrapperCol: { span: 20 } } },
                [
                  h(Input, {
                    style: { width: '100%' },
                    attrs: { value: this.formData[item.field] },
                    on: { input: (e) => this.$set(this.formData, item.field, e.target.value) },
                  }),
                ]
              );
            }),
          ]
        ),
      ]),
      h(
        Space,
        {
          style: {
            display: 'flex',
            justifyContent: 'flex-end',
            padding: '16px 24px',
            borderTop: '1px solid rgba(255,255,255,0.15)',
          },
          attrs: { size: 10 },
        },
        [
          // h(SpinButton, { on: { click: this.closeDialog } }, '取消'),
          // h(SpinButton, { attrs: { type: 'primary' }, on: { click: this.sendMessage } }, '确定'),
        ]
      ),
    ]);
  },
};

export function openReportSendDialog(data, afterClose) {
  if (typeof afterClose !== 'function') {
    afterClose = () => {};
  }
  data = Object.assign({ msg: '' }, data);
  dialog({
    content: View,
    contentProps: { type: data.type, warn_id: data.warn_id },
    dialogProps: {
      title: '短信通知',
      width: 'medium',
      height: 'fixed',
      footer: null,
      afterClose: afterClose,
    },
  });
}
